<!--
 * @Descripttion:
 * @version:
 * @Author: albus
 * @Date: 2021-11-09 13:50:03
-->
<template>
  <div class="home">
    <div class="home-header">
      <div>Kredito</div>
      <svg-icon iconClass="remind" class="remind" />
    </div>
    <div class="applied">
      <div class="applied-title">个人最高领取额度(Rp)</div>
      <div class="applied-amount">6,000,000</div>
      <div class="flex justify-center">
        <div @click="goUser" class="applied-btn">进度90%继续申请</div>
      </div>
    </div>
    <div class="home-swipe">
      <Swipe :autoplay="3000" :show-indicators="false">
        <SwipeItem v-for="item in images" :key="item.id">
          <img v-lazy="item.picture" />
        </SwipeItem>
      </Swipe>
    </div>
    <div class="process">
      <div class="flex justify-between items-center process-top">
        <span>Akumulasi jumlah pengguna 1.000.000 orang</span>
        <svg-icon iconClass="next" />
      </div>
      <div class="process-tab">
        <div
          v-for="item in processList"
          :key="item.title"
          class="process-tab-item"
        >
          <svg-icon :iconClass="item.icon" class="tab-icon" />
          {{ item.title }}
        </div>
      </div>
    </div>
    <div class="user-bottom">
      <img src="@/assets/user/afpi.png" alt="" />
    </div>
    <TabBar />
  </div>
</template>

<script>
import { banners } from '@/api/login'
import { COMMON_TIMES } from '@/common/constants.js'
import TabBar from '@/components/TabBar/index.vue'
import { Swipe, SwipeItem } from 'vant'
export default {
  name: 'Home',
  components: { TabBar, Swipe, SwipeItem },
  data() {
    return {
      images: [
        { key: 'swipe1', url: require('@/assets/user/user_bg.png') },
        { key: 'swipe2', url: require('@/assets/user/afpi.png') }
      ],
      processList: [
        { title: 'Tentang Kredito', icon: 'wallet' },
        { title: 'Dukungan Kredito', icon: 'bank' },
        { title: 'Produk Kredito', icon: 'ticket' }
      ]
    }
  },
  created() {
    banners().then(res => {
      this.images = res
    })
  },
  mounted() {},
  methods: {
    goUser() {
      // console.log(COMMON_TIMES)
      this.$router.push({ path: '/personalInformation', query: { id: 12 } })
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  background: #f5f5f5;
  min-height: 100vh;
  @apply text-sm;
  padding-bottom: 100px;
}
.home-header {
  @apply text-xl flex items-center justify-between;
  margin: 0 20px;
  height: 50px;
  line-height: 50px;
  .remind {
    background: black;
  }
}

.applied {
  @apply bg-blue;
  margin: 20px;
  border-radius: 6px;
  height: 220px;
  text-align: center;
  color: white;
  .applied-title {
    height: 60px;
    line-height: 60px;
  }
  .applied-amount {
    font-size: 34px;
    height: 60px;
    line-height: 60px;
    margin-bottom: 20px;
  }
  .applied-btn {
    width: 160px;
    height: 40px;
    line-height: 40px;
    background: orange;
    border-radius: 20px;
  }
}
.home-swipe {
  width: calc(100% - 40px);
  height: 100px;
  margin: 0 20px;
  border-radius: 6px;
  background: orange;
  text-align: center;
  margin-bottom: 20px;
  .swipe-img {
    width: calc(100% - 40px);
  }
  img {
    width: 100%;
    height: 100px;
  }
}

.process {
  margin: 0 20px;
  background: white;
  border-radius: 6px;
  .process-top {
    padding: 0 10px;
    line-height: 50px;
    height: 50px;
  }
  .process-tab {
    height: 86px;
    background: white;
    border-radius: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 12px;
    .process-tab-item {
      font-size: 14px;
      text-align: center;
      width: 20%;
      .tab-icon {
        font-size: 30px;
        width: 100%;
      }
    }
  }
}

.user-bottom {
  img {
    width: calc(100% - 114px);
    margin-left: 39px;
    margin-top: 30px;
  }
}
</style>
